<script setup>
import {ref} from 'vue';
// 引入验证联系方式唯一性
import {appendContactApi} from '@/service/member.js';
import {ElMessage} from "element-plus";
import {RoleArray} from "../config/common.js";

const emits = defineEmits(['update:contacts']);
// 更新父组件的contacts
const updateContacts = (contacts) => {
  emits('update:contacts', contacts);
};


const dialogVisible = ref(false);

const typeList = ref([
  {
    label: '手机',
    value: 1
  },
  {
    label: '微信',
    value: 2
  },
]);
// roleList
const roleList = ref(RoleArray);
const form = ref({
  member_id: 0,
  type: 1,
  role: 1,
  name: '',
  contact: '',
});

// 设置form的验证规则
const rules = ref({
  type: [
    {required: true, message: '请选择类型', trigger: "blur"}
  ],
  role: [
    {required: true, message: '请选择联系人角色', trigger: "blur"}
  ],
  name: [
    {required: true, message: '请输入联系人姓名', trigger: "blur"}
  ],
  contact: [
    {required: true, message: '请输入联系方式',},
    // 自定义验证规则，当type为1时，验证手机号码；当type为2时，验证微信号
    {
      validator: (rule, value, callback) => {
        if (form.value.type === 1) {
          if (!/^1[3456789]\d{9}$/.test(value)) {
            callback(new Error('请输入正确的手机号码'));
          } else {
            callback();
          }
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

// 初始化form
const initForm = () => {
  form.value = {
    member_id: 0,
    type: 1,
    role: 1,
    name: '',
    contact: '',
  };
};

const openDialog = (member_id) => {
  initForm();
  dialogVisible.value = true;
  form.value.member_id = member_id;
};

// 关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false;
  initForm();
};

// 提交表单
const formRef = ref(null);
const handleSave = async () => {
  // 表单验证后提交
  formRef.value.validate(async valid => {
    if (valid) {
      const {code, data, msg} = await appendContactApi(form.value);
      if (code === 200) {
        updateContacts(data);
        ElMessage.success(msg);
        closeDialog();
      } else {
        ElMessage.error(msg);
      }
    } else {
      return false;
    }
  });
};

defineExpose({
  openDialog
});

</script>

<template>
  <el-dialog v-model="dialogVisible" title="追加联系方式" width="300">
    <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
      <el-form-item label="联系类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio v-for="item in typeList" :key="item.value" :value="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="联系人角色" prop="role">
        <el-select v-model="form.role" placeholder="请选择联系人角色">
          <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="称呼" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="contact">
        <el-input v-model="form.contact"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="handleSave">添加</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>
